<template>
  <div class="edit-popup">
    <popup
      ref="popupRef"
      :title="popupTitle"
      :async="true"
      width="550px"
      @confirm="handleSubmit"
      @close="handleClose"
      :confirm-button-text="false"
      :cancel-button-text="false"
    >
      <div class="flex flex-wrap">
        <div v-for="(item, i) in formData.path" :key="i">
          <el-image
            class="mr-[10px] mb-[10px]"
            v-if="item.type === 'image'"
            style="width: 100px; height: 100px"
            :preview-src-list="[item.path]"
            :src="item.path"
            fit="fill"
          />
          <div
            @click="onlinePreview(item.path)"
            style=""
            class="w-[100px] h-[100px] bg-[rgba(0,0,0,0.5)] rounded-[8px] cursor-pointer flex justify-center items-center mr-[10px] mb-[10px]"
            v-else-if="item.type === 'pdf'"
          >
            <img class="w-[70px]" src="@/assets/file/Pdf.png" />
          </div>
          <div
            @click="onlinePreview(item.path)"
            style=""
            class="w-[100px] h-[100px] bg-[rgba(0,0,0,0.5)] rounded-[8px] cursor-pointer flex justify-center items-center mr-[10px] mb-[10px]"
            v-else-if="item.type === 'docx'"
          >
            <img class="w-[70px]" src="@/assets/file/docx.png" />
          </div>
          <div
            class="cursor-pointer"
            v-else-if="item.type === 'video'"
            @click="handlePreview(item)"
          >
            <video class="w-[100px] h-[100px]" :src="item.path" />

            <el-dialog v-model="visible" width="740px" title="视频预览">
              <video-player ref="playerRef" :src="url" width="100%" height="450px" />
            </el-dialog>
          </div>
          <div
            @click="onlinePreview(item.path)"
            style=""
            class="w-[100px] h-[100px] bg-[rgba(0,0,0,0.5)] rounded-[8px] cursor-pointer flex justify-center items-center mr-[10px] mb-[10px]"
            v-else-if="item.type === 'xlsx'"
          >
            <img class="w-[70px]" src="@/assets/file/XLSX.png" />
          </div>
          <div
            @click="onlinePreview(item.path)"
            style=""
            class="w-[100px] h-[100px] bg-[rgba(0,0,0,0.5)] rounded-[8px] cursor-pointer flex justify-center items-center mr-[10px] mb-[10px]"
            v-else
          >
            <div class="text-[30px] text-[#fff] font-medium">{{ item.suffix }}</div>
          </div>
        </div>
      </div>
    </popup>
  </div>
</template>
<script lang="ts" setup>
import type { FormInstance } from 'element-plus'
import { cloneDeep } from 'lodash-es'

import { apiAnnexAdd, apiAnnexEdit } from '@/api/project'
import Popup from '@/components/popup/index.vue'
import { onlinePreview } from '@/utils/util'

const emit = defineEmits(['success', 'close'])
const formRef = shallowRef<FormInstance>()
const popupRef = shallowRef<InstanceType<typeof Popup>>()
const mode = ref('add')
const popupTitle = computed(() => {
  return mode.value == 'edit' ? '查看附件' : '查看附件'
})

const visible = ref(false)
const url = ref('')
const formData = reactive({
  id: '',
  name: '',
  // remark: '',
  order_id: '',
  room_id: '',
  path: []
})

const handleSubmit = async () => {
  await formRef.value?.validate()
  const data = JSON.parse(JSON.stringify(formData))
  data.path = data.path.toString()
  mode.value == 'edit' ? await apiAnnexEdit(data) : await apiAnnexAdd(data)
  popupRef.value?.close()
  emit('success')
}

const open = (type = 'add', id: any) => {
  mode.value = type
  formData.order_id = id
  formData.room_id = id
  popupRef.value?.open()
}

const setFormData = (data: Record<any, any>) => {
  for (const key in formData) {
    if (data[key] != null && data[key] != undefined) {
      //@ts-ignore
      formData[key] = data[key]
    }
  }
}

const getDetail = async (row: Record<string, any>, path = 'path') => {
  // const data = await jobsDetail({
  //   id: row.id
  // })
  const r = cloneDeep(row)
  r.path = r[path].split(',')?.map((v: any) => {
    const scale = v.split('.')
    const fileType: any = {
      pdf: 'pdf',
      docx: 'docx',
      xlsx: 'xlsx'
    }
    'jpg,png,gif,jpeg,ico'.split(',').map((v: any) => {
      fileType[v] = 'image'
    })
    'wmv,avi,mpg,mpeg,3gp,mov,mp4,flv,rmvb,mkv'.split(',').map((v: any) => {
      fileType[v] = 'video'
    })
    return {
      type: fileType[scale[scale.length - 1]],
      path: v,
      suffix: scale[scale.length - 1]
    }
  })
  setFormData(r)
}

const handlePreview = (row: any) => {
  url.value = row.path
  visible.value = true
}
const handleClose = () => {
  emit('close')
}

defineExpose({
  open,
  setFormData,
  getDetail
})
</script>
